import React, {
  useEffect,
  useState,
  useImperativeHandle,
  forwardRef,
} from 'react';

import MyCase from '@/components/myCase';
import MyTable from '@/components/myTable';
import { findChild } from '@/utils';
// import AreaTree from '../AreaTree';
import CurPagination from './curPagination';
import './index.less';
import usePagination from './hooks/usePagination';
import useTableData from './hooks/useTableData';

interface Props {
  children?: any;
  className?: string;
  pageTempStyle?: anyObject;
  treeStyle?: anyObject;
  searchStyle?: anyObject;
  actionsGroup?: any[];
  columns?: any[];
  rowSelection?: any;
  showPagination?: any;
  defaultPageSize?: number;
  pageSizeOptions?: any[];
  paramsPage?: anyObject;
  requestPage?: any;
  rowKey?: string;
  title?: string;
  showAside?: boolean;
  treeOption?: any;
  maxPageSize?: any;
  tranOuterData?: Function;
}

interface TreeItem {
  title: string;
  key: string;
  children?: Array<TreeItem>;
  parentId?: string;
}

const PageTemp = (props: Props, ref: any) => {
  const {
    className = '',
    pageTempStyle = {
      width: '100%',
      height: '100%',
    },
    treeStyle = {},
    searchStyle = {},
    actionsGroup = [],
    columns = [],
    rowSelection = {},
    showPagination = true,
    defaultPageSize = 20,
    pageSizeOptions = [10, 20, 50, 100],
    requestPage = {},
    paramsPage = {},
    rowKey = 'id',
    title = '',
    showAside = false,
    maxPageSize = '',
  } = props;
  const [curParams, setCurParams] = useState<any>({ ...paramsPage });

  const { pagination, setPage } = usePagination();

  const { dataSource, loading, total } = useTableData(requestPage, pagination, {
    ...curParams,
  });

  const [tableData, setTableData] = useState<any>([]);

  const [areaId, setAreaId] = useState<string>('');

  useImperativeHandle(ref, () => {
    return { queryTableData };
  });

  useEffect(() => {
    // initData();
    // eslint-disable-next-line
  }, []);

  const onPageNumChange = (pageNum: any, pageSize: number) => {
    // setPageNum(pageNum);
    // setPageSize(pageSize);
    // initData(pageNum, pageSize);
  };

  const queryTableData = (pageNum: number, paramsValue: anyObject) => {
    const { treeOption } = props;
    const { areaKey = 'areaId' } = treeOption;
    const pages = { ...pagination };
    const tempParams = { ...curParams };
    const tempParamsValue = { ...paramsValue };
    if (tempParams[areaKey]) {
      tempParamsValue[areaKey] = tempParams[areaKey];
    }
    setCurParams({ ...tempParamsValue });
    setPage(pageNum, pages.pageSize);
  };
  const onSelectClick = (
    areaId: string,
    flash: any,
    node: any,
    name: string,
  ) => {
    // setAreaId(areaId);
    const { treeOption } = props;
    const { areaKey = 'areaId' } = treeOption;
    const tempParams = { ...curParams };
    tempParams[areaKey] = areaId;
    setCurParams(tempParams);
    const { pageNum, pageSize } = { ...pagination };
    setPage(pageNum, pageSize);
  };

  const renderPagination = () => {
    return (
      <div className="temp_table__pagination">
        {showPagination ? (
          <CurPagination
            pagination={pagination}
            setPage={setPage}
            total={total}
            pageSizeOptions={pageSizeOptions}
            defaultPageSize={defaultPageSize}
          />
        ) : null}
      </div>
    );
  };

  return (
    <>
      <div
        className={`temp_wrapper__containter ${className}`}
        style={pageTempStyle}
      >
        {showAside ? (
          <MyCase
            className="temp_area__tree"
            title={title}
            bgWidth="2rem"
            showHeader={true}
            panelStyle={treeStyle}
          >
            {/* <AreaTree onSelectClick={onSelectClick}></AreaTree> */}
          </MyCase>
        ) : null}
        <div className="temp_right__content">
          {findChild(props.children, 'custom') ? (
            <MyCase
              className="temp_right_content__search"
              key="search"
              panelStyle={searchStyle}
            >
              {findChild(props.children, 'custom')}
            </MyCase>
          ) : null}
          <MyCase
            className="temp_right_content__main"
            showHeader={!showAside}
            title={title}
            contentStyle={{ paddingBottom: '5px' }}
          >
            {actionsGroup && actionsGroup.length > 0 ? (
              <div className="temp_content_main__btns">{actionsGroup}</div>
            ) : null}
            <div className="tamp_content_main__table">
              <MyTable
                irrDataSource={dataSource}
                irrColumns={columns}
                loading={loading}
                rowKey={rowKey}
                rowSelection={rowSelection}
              />
              {showAside ? renderPagination() : null}
            </div>
          </MyCase>
          {!showAside ? (
            <div className="temp_table_outer__pagination">
              {renderPagination()}
            </div>
          ) : null}
        </div>
      </div>
    </>
  );
};

export default forwardRef(PageTemp);
